<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <script src="../../resource/js/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".outer>li").mouseenter(function () {
                $(this).find("ul").first().fadeIn("500ms");
            });
            $(".outer>li").mouseleave(function () {
                $(this).find("ul").first().fadeOut("500ms");
            });
        });
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 子元素（后代）选择器 */
        /* .outer li 所有子元素*/

        .wrapper {

        }

        .outer {
            display: flex; /*  父容器 */

        }

        .outer > li { /* 直接子元素 */
            list-style: none;
            height: 35px;
            /*width: 7.692%;*/
            flex: 1; /*  子容器 */
            background-color: #446398;
            text-align: center; /* 水平居中 */
            line-height: 35px;
            /*float:left;*/
            border-right: 1px solid red;
            /*box-sizing: content-box;*//* 默认值 */
            box-sizing: border-box; /* CSS3才出现 */
        }

        li a {
            color: white;
            text-decoration: none
        }

        .second {
            display: none;
        }

        .second > li {
            width: 100%;
            height: 35px;
            background-color: cornflowerblue;
            list-style: none;
        }

        .second > li a {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>


<div id="wrapper">
    <ul class="outer">
        <li><a href="#">首页</a></li>
        <li>
            <a href="#">学校简介</a> <!-- 一级菜单 -->
            <!-- 默认效果：竖着排列 -->
            <ul class="second">
                <li><a href="#">现任校领导</a></li>
                <li><a href="#">历届书记校长</a></li>
                <li><a href="#">学校概况</a></li>
                <li><a href="#">历史沿革</a></li>
                <li><a href="#">校标、校训</a></li>
                <li><a href="#">校歌</a></li>
            </ul>
        </li>
        <li><a href="#">机构设置</a></li>
        <li><a href="#">师资队伍</a></li>
        <li><a href="#">科学研究</a></li>
        <li>
            <a href="#">国际交流</a>
        </li>
        <li><a href="#">招生就业</a></li>
        <li><a href="#">北海校区</a></li>
        <li><a href="#">学术会议</a></li>
        <li><a href="#">诚聘英才</a></li>
        <li><a href="#">人才培养</a></li>
        <li><a href="#">党史学习教育</a></li>
        <li><a href="#">常用链接</a></li>
    </ul>

</div>

</body>
</html>
